<template>
  <div class="classify">
    <div class="cla_box">
      <!-- 面包屑导航 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>全部商品</el-breadcrumb-item>
        <el-breadcrumb-item v-if="!search">分类</el-breadcrumb-item>
        <el-breadcrumb-item v-else>搜索</el-breadcrumb-item>
        <el-breadcrumb-item v-if="search">{{ search }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="nav">
      <div class="title">分类</div>
      <!-- tab分类列表 -->
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane
          :label="item.category_name"
          :name="item.category_id + ''"
          v-for="item in categoryData"
          :key="item.category_id"
          @tab-click="handleClick(item.category_id)"
        ></el-tab-pane>
      </el-tabs>
    </div>
    <div class="list_box">
      <div class="list">
        <p v-show="!total">抱歉没有找到相关的商品，请看看其他的商品</p>
        <!-- 渲染 -->
        <my-list :listData="product" :moreShow="true"></my-list>
        <!-- 分页 -->
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :page-size="pageSize"
          layout="prev, pager, next"
          :total="total"
          v-show="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import MyList from "../MyList.vue";
import axios from "../../api/allProductsApi";
export default {
  components: { MyList },
  data() {
    return {
      search: "",
      activeName: "-1",
      categoryData: [], // tab分类列表数据
      product: [], // 列表数据
      categoryID: [], // 后台传递数据
      total: 0,
      currentPage: 1,
      pageSize: 15,
    };
  },
  created() {
    this.getCategory(); // 获取分类列表数据
  },
  activated() {
    //在刚进入页面的时候 如果query中没有任何的值 则表示是直接跳转到商品列表的
    // 先把路由里的数据对象拿过来保存
    let query = this.$route.query;
    console.log(query);
    // 浏览更多逻辑  在加载更多的时候传了两个参数
    if (query.switch) {
      this.categoryID = this.$route.query.categoryID;
      this.getAllProduct();
      return;
    }
    // 搜索逻辑  
    // 判断是不是从搜索跳转过来的  不是
    if (!Object.keys(query).length) {
      this.activeName = "0";
    } else {
      // 判断有没有数据  如果有把路由的数据放到本组件内，调用搜索的方法
      if (query.search) {
        this.search = query.search;
        this.getProductBySearch();
      }
      // 路由里携带数据，也就是从搜索页跳转过来 给tab绑定一个未知的id 取消高亮
      this.activeName = "-1";
    }
  },
  methods: {
    // 分类列表数据 category_id
    async getCategory() {
      let { data: res } = await axios.category();
      this.categoryData = res.category;
      this.categoryData.unshift({
        category_id: 0,
        category_name: "全部",
      });
    },
    // 全部商品数据 product_id
    async getAllProduct() {
      let data = {
        categoryID: this.categoryID,
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      };
      let apiName = this.categoryID.length ? "productByCategory" : "allProduct";
      let { data: res } = await axios[apiName](data);
      this.product = res.Product;
      this.total = res.total;
    },
    // tab 切换时函数
    handleClick(val) {
      this.activeName = val;
    },
    // 页码值发生改变的事件
    handleCurrentChange(val) {
      this.currentPage = val;
      if (this.search) {
        this.getProductBySearch();
      } else {
        this.getAllProduct();
      }
    },
    //
    // 搜索的方法
    async getProductBySearch() {
      let data = {
        search: this.search,
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      };
      let { data: res } = await axios.productBySearch(data);
      this.product = res.Product;
      this.total = res.total;
      console.log(this.product);
    },
  },
  watch: {
    // 监听Tab切换
    activeName(val) {
      //每次切换分类都要重置分页数据
      this.currentPage = 1;
      this.total = 0;
      this.search = "";
      if (val === "-1") return;
      if (val === "0") {
        this.categoryID = [];
      } else {
        this.categoryID = [val * 1];
      }
      this.getAllProduct();
    },
    // 监听路由
    $route(val) {
      // 浏览更多

      if (val.query.switch) {
        let arr = val.query.categoryID;
        if (arr.length == 1) {
          this.activeName = arr[0] + "";
        } else {
          this.activeName = "-1";
        }
        return;
      }
      // 搜索
      if (val.query.search) {
        this.search = val.query.search;
        this.currentPage = 1;
        this.total = 0;
        this.activeName = "-1";
        this.getProductBySearch();
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.cla_box {
  max-width: 1310px;
  height: 30px;
  margin: 10px auto;
  .el-breadcrumb {
    line-height: 30px;
    font-size: 16px;
  }
}
.nav {
  max-width: 1310px;
  margin: 1px auto;
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #e4e7ed;
  //   box-shadow: 0 2px 0px #eee;
  .title {
    float: left;
    width: 50px;
    font-size: 16px;
    font-weight: 700;
  }
  .el-tabs {
    float: left;
    .el-tabs__item {
      border-bottom: 0;
    }
  }
}
.list_box {
  background: #f5f5f5;
  padding: 1px 0px;
}
.list {
  max-width: 1310px;
  min-height: 300px;
  margin: 20px auto;
  display: flex;
  flex-direction: column;
  .el-pagination {
    text-align: center;
  }
}
</style>
